<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Import Wallet Addresses</title>
    <link type="text/css"  rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://connect.trezor.io/9/trezor-connect.js"></script>
    <script src="custom.js"></script>
    <script src="app.js"></script>
</head> 
<body>
    <div class="container" style="margin-top: 15px">
        <div class="row">
            <div class="col-xs-12 col-lg-offset-3 col-lg-6">
                <div class="panel panel-primary" id="step1">
                    <div class="panel-heading">
                        <i class="fa fa-lg fa-download"></i> Import Wallet Addresses
                        <div class="pull-right">Step 1 of 3</div>
                    </div>
                    <div class="panel-body">
                        <center>
                            <p class="text-justify">FreeWallet would now like to connect to your Trezor device and generate a list of addresses which you can then choose to import into FreeWallet.</p>
                            <div class="alert alert-info" id="trezor-status">Please click the button below to get started</div>
                            <button class="btn btn-block btn-success trezor-connect">Connect to Trezor</button>
                        </center>
                    </div>
                </div>
                <div id="step2" style="display:none;">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <i class="fa fa-lg fa-download"></i> Import Wallet Addresses
                            <div class="pull-right">Step 2 of 3</div>

                        </div>
                        <div class="panel-body">
                            <center>Please select the addresses that you want to add to Freewallet and click 'Import'</center>
                        </div>
                        <form id="import-addresses">
                        <table class="table table-condensed table-striped" id="addressList">
                        <thead>
                            <th>Address</th>
                            <th>Path</th>
                            <th><div class="pull-right"># Tokens</div></th>
                        </thead>
                        <tbody>
                            <!-- Addresses content is inserted here -->
                        </tbody>
                        </table>
                        </form>
                        <div class="panel-body">
                            <div id="import" class="btn btn-success btn-block">Import Addresses</div>
                        </div>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <i class="fa fa-lg fa-download"></i> Address Options
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="addressType" class="col-sm-4 control-label">Address Type</label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="addressType" id="addressType">
                                            <option value="44" selected>Legacy (p2pkh)</option>
                                            <option value="49">Legacy Segwit (p2wpkh-nested-in-p2sh)</option>
                                            <option value="84">Normal (p2wpkh)</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="addressAccount" class="col-sm-4 control-label">Account #</label>
                                    <div class="col-sm-8">
                                      <input type="number" class="form-control" id="addressAccount" name="addressAccount" placeholder="Account #" min=0 max=100 value=0>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="addressNumber" class="col-sm-4 control-label"># Addresses</label>
                                    <div class="col-sm-8">
                                        <input type="number" class="form-control" id="addressNumber" name="addressNumber" placeholder="# Addresses" min=1 max=100 value=10>
                                    </div>
                                </div>
                                <div class="btn btn-block btn-info trezor-connect">Get Wallet Addresses</div>
                            </form>
                        </div>
                    </div>                    
                </div>
                <div class="panel panel-primary" id="step3" style="display:none;">
                    <div class="panel-heading">
                        <i class="fa fa-lg fa-download"></i> Import Complete
                        <div class="pull-right">Step 3 of 3</div>
                    </div>
                    <div class="panel-body">
                        <center>
                            <div class="alert alert-success" style="margin-bottom: 0px !important;">Your Trezor hardware wallet addresses have been imported to FreeWallet.</div>
                        </center>
                    </div>
                </div>

            </div>
        </div>
    </div>

<!-- Custom CSS-->
<style>
.checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}
th:first-child,
td:first-child {
    padding-left: 15px !important;
}
th:last-child,
td:last-child {
    padding-right: 15px !important;
}
tbody tr:last-child
    border-bottom:1px solid #ddd;
}
.no-bottom-margin {
    margin-bottom: 0px;
}
#network-selector {
    width: 100px;
}

.import-trezor-address {
    width: 275px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

<!-- Handle connecting to trezor device -->
<script>
$(document).ready(function(){
    var qs      = parseQueryString(),
        tx      = (qs.tx) ? qs.tx : false,
        status  = $('#trezor-status'),
        network = (qs.network=='testnet') ? 1 : 0,
        index   = 0;

    // Initialize connection to the Trezor
    trezor.initTrezor();

    // Disable P2WPKH on testnet (Trezor is returning mainnet addresses instead of testnet)
    if(qs.network=='testnet')
        $('#addressType').find('option[value="84"]').remove();

    // Clear out address list on address type change
    $('#addressType').change(function(){ 
        $('#addressList tbody').html(''); 
        index = 0;
    });

    // Reset address index count on account switch
    $('#addressAccount').change(function(){ 
        index = 0;
    });

    // Connect to trezor device and get address lsit
    $('.trezor-connect').click(function(){
        var type    = $('#addressType').val(),
            account = $('#addressAccount').val(),
            limit   = $('#addressNumber').val(),
            bundle  = [];

        status.text('Communicating with the Trezor...');
        // Build out list of address paths to dump
        for(i=0;i<limit;i++){
            bundle.push({ 
                path: "m/" + type + "'/" + network + "'/" + account + "'/0/" + index,
                showOnTrezor: false 
            });
            index++;
        }
        // Make request to Trezor to get address list
        console.log('Trezor Request=',bundle);
        TrezorConnect.getAddress({
            bundle: bundle
        }).then(function(o){
            console.log('Trezor Response=',o);
            if(o.success){
                o.payload.forEach(function(address){
                    addAddress(address.address, address.serializedPath)
                });
                // Move to step 2
                $('#step1').hide();
                $('#step2').show();
            } else {
                status.text('Error getting addresses... Please try again');
            }
        });
    });

    // Handle importing the addresses
    $('#import').click(function(){
        // Parse selected addresses into object
        var obj = {};
        $('input:checked').each(function(){
            var addr = $(this).val(),
                path = $(this).attr('data-path');
            obj[path] = addr;
        });
        // Display success message
        $('#step2').hide();
        $('#step3').show();
        // Pass address data to Freewallet via URI 
        var net = (qs.network=='testnet') ? 'testnet' : 'mainnet',
            url = 'freewallet:?action=import&device=trezor&network=' + net + '&data=' + encodeURI(JSON.stringify(obj));
        console.log('throwing user to ', url);
        window.location = url;

    });

});
</script>
</body>
</html>